<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>角色&菜单关系</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

	<link rel="stylesheet" href="${ctxPath}/lib/layui/css/layui.css" media="all">
	<link rel="stylesheet" href="${ctxPath}/css/public.css" media="all">

	<link rel="stylesheet" href="${ctxPath}/ztree/css/zTreeStyle/zTreeStyle.css" />
</head>

<body>
	<div class="layuimini-container">
		<div class="layuimini-main">

			<form class="layui-form" id="form" lay-filter="formInfo">
			
				<input type="hidden" name="roleId" id="roleId" class="layui-input" />
				<input type="hidden" name="mids" id="mids" class="layui-input" />
				
				<div class="layui-row">
					<div class="layui-col-md12">
						<label class="layui-form-label">选择菜单</label>
						<div class="layui-input-block">
							<div id="test" class="ztree"></div>
						</div>
					</div>
				</div>

				<div class="layui-row">
					<div class="layui-col-12">
						<div class="layui-input-block">
							<button class="layui-btn" lay-submit="" lay-filter="btn-form-submit">立即提交</button>
							<button type="reset" class="layui-btn layui-btn-primary">重置</button>
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>

	<script src="${ctxPath}/lib/layui/layui.js" charset="utf-8"></script>
	<script src="${ctxPath}/js/core.util.js" charset="utf-8"></script>
	<script src="${ctxPath}/js/lay-config.js?v=2.0.0" charset="utf-8"></script>

	<script type="text/javascript" src="${ctxPath}/lib/jquery/jquery-3.4.1.min.js"></script>
	<script type="text/javascript" src="${ctxPath}/ztree/js/jquery.ztree.core.js"></script>
	<script type="text/javascript" src="${ctxPath}/ztree/js/jquery.ztree.excheck.js"></script>

	<script type="text/javascript">
		layui.use(['form', 'layer', 'notice'], function () {
			var $ = layui.jquery, form = layui.form, layer = layui.layer, notice = layui.notice;
			let setting = {
				check: { enable: true },
				data: { simpleData: {
						enable: true
					}
				},
				callback: { onCheck: zTreeOnCheck }
			}
			
			let zTreeObj;
			
			$("#roleId").val(request("roleId"));
			
			// 查询所有菜单数据 --- ztree
			sendAjax("/sys/menu/queryAllModules?roleId=" + request("roleId"), null, function (rest) {
				zTreeObj = $.fn.zTree.init($("#test"), setting, rest.data);
			}, "GET");

			// 查询所有菜单数据
			/*
			sendAjax("/sys/menu/listAll", null, function (rest) {
				console.log(rest);
				$("#pid").empty().append("<option value=''>请选择菜单</option>");
				$.each(rest.data, function (i, e) {
					$("#pid").append("<option value='" + e.id + "'>" + e.groupName + "</option>");
				});
				form.render('select');
			});
			
			*/

			//监听提交
			form.on('submit(btn-form-submit)', function (data) {
								
				sendAjax("/sys/role/menu/saveOrUpdate", data.field, function (rest) {
					notice.msg(rest.msg, {icon: 1});
				}, "GET");

				return false;
			});

			function zTreeOnCheck(event, treeId, treeNode) {
				// 获取所有被勾选的节点集合，如果checked = true 表示获取勾选的节点，false 表示获取未勾选的节点
				var nodes = zTreeObj.getCheckedNodes(true);
				// 获取所有的资源 id 值
				if (nodes.length > 0) { // 有选择节点
					var mIds = "";
					for (var i = 0; i < nodes.length; i++) {
						if (i < nodes.length - 1) {
							mIds += nodes[i].id + "&";
						} else {
							mIds += nodes[i].id;
						}
					}
				}
				$("#mids").val(mIds);
			};

		});
	</script>
</body>

</html>